<template>
  <div class="login">
    <a-form :form="form" @submit="handleSubmit" class="login-form">
      <h3 class="title">maobing后台管理系统</h3>
      <a-form-item>
        <a-input
          size="large"
          v-decorator="[
            'username',
            {
              rules: [{ required: true, message: '请输入用户名!' }],
            },
          ]"
          placeholder="用户名"
        >
          <a-icon
            slot="prefix"
            type="user"
            style="color: rgba(0, 0, 0, 0.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          size="large"
          v-decorator="[
            'password',
            {
              rules: [{ required: true, message: '请输入密码!' }],
            },
          ]"
          type="password"
          placeholder="密码"
        >
          <a-icon
            slot="prefix"
            type="lock"
            style="color: rgba(0, 0, 0, 0.25)"
          />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          size="large"
          v-decorator="[
            'code',
            {
              rules: [{ required: true, message: '请输入验证码!' }],
            },
          ]"
          type="text"
          placeholder="验证码"
          autocomplete="off"
          style="width: 50%"
          @keyup.enter.native="handleSubmit"
        >
          <a-icon
            slot="prefix"
            type="safety"
            style="color: rgba(0, 0, 0, 0.25)"
          />
        </a-input>
        <div class="login-code">
          <a v-html="codeImage" @click="getCodeImg"></a>
        </div>
      </a-form-item>
      <a-form-item>
        <a-button size="large" type="primary" html-type="submit" block>
          <span v-if="logining">登 录</span>
          <span v-else>登 录 中 ...</span>
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";

export default {
  data() {
    return {
      form: this.$form.createForm(this),
      codeImage: "",
      codeValue: "",
      logining: true,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCodeImg();
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          if (
            values.code.toLocaleLowerCase() !==
            this.codeValue.toLocaleLowerCase()
          ) {
            this.$message.error("验证码错误！");
            this.getCodeImg();
            return false;
          }
          values.username = values.username.trim();
          this.logining = false;
          this.$store
            .dispatch("Login", values)
            .then(() => {
              setTimeout(() => {
                this.$router.push({ path: this.redirect || "/" });
                this.$message.success('登录成功！');
              }, 1000);
            })
            .catch((err) => {
              this.$message.error(err.msg);
              this.logining = true;
              this.getCodeImg();
            });
        }
      });
    },
    getCodeImg() {
      getCodeImg().then((res) => {
        this.codeImage = res.data.data;
        this.codeValue = res.data.text;
      });
    },
  },
};
</script>

<style>
.login {
  height: 100%;
  background-image: url(../assets/images/login-bg.png);
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-form {
  width: 400px;
  background: rgba(255, 255, 255, 0.6);
  padding: 30px 40px 5px 40px;
  border-radius: 6px;
  box-shadow: 0 0 20px 10px rgba(65, 63, 63, 0.5);
}
.login-form .ant-input {
  height: 38px;
}
.title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #232323;
}
.login-code {
  width: 40%;
  float: right;
}
</style>
